{% extends "manager/base.html" %}

{% block header %}
    <link href='{{ STATIC_URL }}esb/css/helper.{{CSS_SUFFIX}}' rel="stylesheet">
{% endblock %}
{% block main %}
<div class="main-page box-info">
    <div class="main-header">
        <span>组件系统列表</span>
        {% if systems %}
        <a class="btn btn-danger btn-min-w f_r mr10" id="systems_delete" href="javascript:;"><i class="bk-icon icon-close" style="font-size: 15px; margin-top: 2px;"></i>  删除</a>
        {% endif %}
        <a class="btn btn-primary btn-min-w f_r mr10" href="{% url 'manager.system.add' %}"><i class="bk-icon icon-plus" style="font-size: 15px; margin-top: 2px;"></i>  添加一个新的系统</a>
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-md-9">
                <div id="table_systems">
                    <table class="table table-hover table-striped" data-sortable-initialized="true" style="text-align: left;">
                        <thead>
                            <tr>
                                <th style="width:20%">#</th>
                                <th style="width:20%">系统名称</th>
                                <th style="width:30%">系统标签</th>
                                <th style="width:30%">系统接口负责人</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for system in systems %}
                        <tr>
                            <td>
                                <input type="checkbox" name="system_id" value="{{system.id}}" />
                            </td>
                            <td>
                                {{ system.name|escape }}
                                <a href="{% url 'manager.system.edit' system.id %}" title="编辑">
                                  <i class="bk-icon icon-edit" style="font-weight: bolder"></i></a>
                            </td>
                            <td>{{ system.label|escape }}</td>
                            <td>{{ system.interface_admin|escape }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" style="text-align: center">您还没有相关组件系统信息
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-3">
{#                    <h4>帮助</h4>#}
{#                    <div style="" class="document">#}
{#                        {{ system_term_html|safe }}#}
{#                        <p style="margin-top: 5px;">更多详情请查看<a target="_blank" href="{% url 'guide.page.index' %}">#}
{#                            <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>#}
{#                            使用指南#}
{#                        </a></p>#}
{#                    </div>#}
                    <div class="panel panel-info">
                        <div class="panel-heading ng-binding" style="font-size: 18px;">帮助</div>
                        <div class="panel-body">
                            <div style="" class="document">
                                {{ system_term_html|safe }}
                                <p style="margin-top: 10px;">更多详情请查看<a target="_blank" href="{% url 'guide.page.index' %}">
                                <i class="bk-icon icon-question-circle" style="margin-top: 2px;font-weight: bold"></i>
                                    使用指南
                                </a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

{% endblock %}

{% block footer %}

{% verbatim %}

{% endverbatim %}

<script type="text/javascript">
    $(function(){
        var systems_manager = {
            get_selected_system_ids: function() {
                var result = []
                $('input[name="system_id"]:checked').each(function(i, j){
                    result.push($(j).val());
                });
                return result;
            }
        };

        // 绑定checkbox修改事件
        $('input[name="system_id"]').bind('change', function(event){
            if ($(this).is(':checked')) {
                $(this).parents('tr').addClass('row-selected');
            } else {
                $(this).parents('tr').removeClass('row-selected');
            }
        });

        // 为删除按钮绑定事件
        $('#systems_delete').bind('click', function(){
            system_ids = systems_manager.get_selected_system_ids();
            if (system_ids.length === 0) {
              dialog({id: 'bktips', fixed: true, title: "<span style='font-size: 15px;'>消息</span>", content: '<i class="bk-icon icon-close2" style="color: red"></i>  请先选择待删除的系统！'}).showModal();
                return
            }
            dialog({
              title: "<span style='font-size: 15px'>删除确认</span>",
                width: 420,
                fixed: true,
                content: "该操作将删除关联的通道和组件，且不可恢复，是否继续？",
                ok: function () {
                    $.post("{% url 'manager.system.deleted' %}", {system_ids: system_ids.join(','), 'csrfmiddlewaretoken': '{{ csrf_token }}'}, 
                        function(data) {
                            if (!data.error_message) {
                                dialog({id: 'bktips', lock: true, content: '<i class="bk-icon icon-check2" style="color: green"></i>  成功删除' + data.affected_rows + '个系统！'}).show();
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000);
                            } else {
                              dialog({id: 'bktips', lock: true, title: "<span style='font-size: 15px;'>消息</span<>", content: '<i class="bk-icon icon-close2" style="color: red"> ' + data.error_message}).showModal();
                            }
                        }
                    );
                },
                cancel: function () {},
                okVal: "确认删除",
                cancelVal: "取消"
            }).showModal(); 
        });
    });
</script>
{% endblock %}
